{% extends 'web/layout.html' %}
{% load staticfiles %}
{% block css %}
    <style>
        input[type='file'] {
            min-height: 34px;
        }

        .file-view {
            height: 80px;
            width: 80px;
            padding: 2px;
            border: 1px dotted #dddddd;
            position: relative;
        }

        .file-view .view-file {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 1001
        }

        .file-view .view-img {
            height: 100%;
            width: 100%;
            border: 0;
            overflow: hidden;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .field-error {
            color: red;
            position: absolute;
            font-size: 12px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">

        <div class="panel panel-default">

            <div class="panel-heading clearfix">{{ item_object.auction.title }} - {{ item_object.title }} - 编辑拍品
            </div>
            <div class="panel-body">
                <div class="form-horizontal clearfix">
                    <form id="itemForm" method="post" novalidate>
                        {% csrf_token %}
                        <div class="clearfix">
                            {% for field in form %}
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="{{ field.id_for_label }}"
                                               class="col-sm-3 control-label">{{ field.label }}</label>
                                        <div class="col-sm-9" style="position: relative;">
                                            {{ field }}
                                            <span class="field-error">{{ field.errors.0 }}</span>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="clearfix">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="col-sm-offset-3 col-sm-9">
                                        <button type="submit" class="btn btn-primary">提 交</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
                <hr/>
                <div class="clearfix">
                    <div class="col-sm-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">拍品规格</div>
                            <div class="panel-body">
                                <div class="form-inline">
                                    <div class="form-group" style="position: relative;">
                                        <input type="text" class="form-control input-sm" placeholder="项" id="key">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control input-sm" placeholder="值" id="value">
                                    </div>
                                    <a class="btn btn-success btn-sm" id="btnAddSpecification">
                                        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> 添 加
                                    </a>
                                </div>
                            </div>
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>项</th>
                                    <th>对应值</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="areaSpecification">
                                {% for info in detail_object_list %}
                                    <tr>
                                        <td>{{ info.key }}</td>
                                        <td>{{ info.value }}</td>
                                        <td>

                                            <a class="btn btn-danger btn-xs delete" nid="{{ info.id }}">删除</a>

                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">拍品详细图片</div>
                            <div class="panel-body">

                                <a class="btn btn-success btn-sm" id="btnAddImage">
                                    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> 添 加
                                </a>
                                <div id="imageTemplate" style="display: none;">
                                    <table>
                                        <tr>
                                            <td>
                                                <div class="file-view">
                                                    <input class="view-file" type="file" name="img">
                                                    <img class="view-img"
                                                         src="{% static 'web/images/default-image.png' %}">
                                                </div>
                                            </td>
                                            <td>
                                                <input type="checkbox">
                                                <input type="text" name="show" hidden>
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-xs" role="group">
                                                    <button type="button" class="btn btn-primary image-save">保存</button>
                                                    <a class="btn btn-danger btn-xs delete">删除</a>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                            </div>
                            <form id="imageForm">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>图片</th>
                                        <th>是否轮播</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="areaImage">
                                    {% for item in image_object_list %}
                                        <tr>
                                            <td>
                                                <img style="height: 60px;" src="{{ item.img }}">
                                            </td>
                                            <td>
                                                {% if item.carousel %}
                                                    <input type="checkbox" checked>
                                                    <input type="text" name="show" value="1" hidden>
                                                {% else %}
                                                    <input type="checkbox">
                                                    <input type="text" name="show" hidden>

                                                {% endif %}
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-xs" role="group">
                                                    <a class="btn btn-danger btn-xs delete" nid="{{ item.id }}">删除</a>
                                                </div>
                                            </td>
                                        </tr>

                                    {% endfor %}
                                    </tbody>
                                </table>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="loading" class="loading hide">
        <div class="loading-icon">
            <img src="{% static 'web/images/loading.gif' %}" alt="">
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        SUB_HANDLE_COUNT = 0;

        $(function () {
            bindChangeImageFile();
            bindAddSpecification();
            bindDeleteSpecification();
            bindAddDetailImage();
            bindDeleteDetailImage();
            bindImageCheckBox();
            bindImageSave();
        });

        /**
         * 图片预览
         */
        function bindChangeImageFile() {
            $('#areaImage').on('change', '.view-file', function () {
                var fileObject = $(this)[0].files[0];
                var blob = window.URL.createObjectURL(fileObject);
                $(this).next().attr('src', blob);
                $(this).next().load(function () {
                    window.URL.revokeObjectURL(blob);
                })
            })
        }

        /**
         * 添加规格
         */
        function bindAddSpecification() {
            $('#btnAddSpecification').click(function () {
                var info = {
                    "key": $('#key'),
                    "value": $('#value')
                };
                var tr = $('<tr>');
                for (var k in info) {
                    info[k].parent().removeClass('has-error');
                    var value = info[k].val();
                    if (value.trim().length < 1) {
                        info[k].parent().addClass('has-error');
                        return
                    }
                    tr.append($('<td>').text(value).attr('name', k));
                }

                $.ajax({
                    url: '{% url "auction_item_detail_add_one" item_id=item_object.id %}',
                    type: 'POST',
                    data: {key: $('#key').val(), value: $('#value').val()},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            tr.append($("<td>").html('<a class="btn btn-danger btn-xs delete" nid="' + res.data.id + '">删除</a>'));
                            $("#areaSpecification").append(tr);
                            for (var item in info) {
                                info[item].val('');
                            }
                        } else {
                            $.each(res.errors, function (k, v) {
                                console.log(k, v);
                                info[k].parent().addClass('has-error');
                            })
                        }
                    }
                });


            })
        }

        /**
         * 删除规格
         */
        function bindDeleteSpecification() {
            $('#areaSpecification').on('click', '.delete', function () {
                var that = $(this);
                $.ajax({
                    url: "{% url 'auction_item_detail_delete_one' %}",
                    type: "get",
                    data: {detail_id: $(this).attr('nid')},
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            that.parent().parent().remove();
                        }
                    }
                })
            })
        }

        /**
         * 添加图片详细
         */
        function bindAddDetailImage() {
            $('#btnAddImage').click(function () {
                $('#imageTemplate tr').clone().appendTo("#areaImage");
            });
        }

        /**
         * 删除图片详细
         */
        function bindDeleteDetailImage() {
            $('#areaImage').on('click', '.delete', function () {
                var that = $(this);
                $.ajax({
                    url: "{% url 'auction_item_image_delete_one' %}",
                    type: "get",
                    data: {image_id: $(this).attr('nid')},
                    success: function (res) {
                        if (res.status) {
                            that.parent().parent().parent().remove();
                        } else {
                            alert('删除失败');
                        }
                    }
                });

            })
        }

        /**
         * 绑定修改checkbox
         */
        function bindImageCheckBox() {
            $("#imageForm").on('click', ':checkbox', function () {
                if ($(this).prop('checked')) {
                    $(this).next().val('1');
                } else {
                    $(this).next().val('');
                }
            });
        }

        /**
         * 绑定保存新图片（然后删除掉按钮）
         */
        function bindImageSave() {

            $("#imageForm").on('click', '.image-save', function () {
                $("#loading").removeClass('hide');

                var that = $(this);
                var formData = new FormData();
                var file_object = $(this).parent().parent().parent().find(':file')[0].files[0];
                if (file_object) {
                    formData.append('img', file_object);
                }
                formData.append('carousel', $(this).parent().parent().parent().find(':text').val());

                $.ajax({
                    url: "{% url 'auction_item_image_add_one' item_id=item_object.id %}",
                    type: "post",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            that.remove();
                            that.next().attr('nid', res.data.id);
                        } else {
                            alert('保存失败');
                            console.log(res);
                        }
                        $("#loading").addClass('hide');
                    }
                })

            });
        }
    </script>
{% endblock %}